<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/header::head-fragment"></head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <header th:replace="admin/header::header-fragment"></header>

    <div th:replace="admin/sidebar::sidebar-fragment(${path})"></div>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <div class="content-header">
            <div class="container-fluid">
            </div>
        </div>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <!-- left column -->
                    <div class="col-md-6">
                        <!-- general form elements -->
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Modify personal information</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <form id="userInfoForm">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="account">Account</label>
                                        <input type="text" class="form-control" id="account"
                                               placeholder="Login User Name" th:value="${loginUserName}"
                                               name="account" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label for="nickName">Nick Name</label>
                                        <input type="text" class="form-control" id="nickName" placeholder="Nick Name"
                                               th:value="${nickName}" name="nickName">
                                    </div>
                                    <div class="form-group">
                                        <label for="oldPassword">Old Password</label>
                                        <input type="password" class="form-control" id="oldPassword"
                                               placeholder="Old Password" name="oldPassword">
                                    </div>
                                    <div class="form-group">
                                        <label for="oldPassword">New Password</label>
                                        <input type="password" class="form-control" id="newPassword"
                                               placeholder="New Password" name="newPassword">
                                    </div>
                                </div>
                                <!-- /.card-body -->

                                <div class="card-footer">
                                    <button type="button" id="updateUserInfoButton" onsubmit="return false;" class="col-12 btn btn-primary">Change It</button>
                                </div>
                            </form>
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div th:replace="admin/footer::footer-fragment"></div>
</div>

<div th:replace="admin/commonjs::commonjs-fragment"></div>
<script th:src="@{/admin/dist/js/profile.js}"></script>
</body>
</html>